<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>videojs</title>
    <link href="video.js/video-js.min.css" rel="stylesheet">
    <script src="video.js/video.min.js"></script>
</head>
<body>

<div>
    <form action="" id="load-url" class="form1">
        <label for="url">视频地址：</label>
        <input type="text" size="100" name="video" id="url">
        <button type="submit">加载</button>
    </form>
</div>

<div style="width: 400px;height: 300px;">
    <video class="video-js "
           controls
           preload="auto"
           autopla="true"
           width="600"
           height="400"
           id="example-video">
        <!--https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8-->
        <source src="https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8"
                type="application/x-mpegURL"></source>
    </video>
</div>


<script>
    (function (window, videojs) {
        var player = window.player = videojs('example-video');

        // hook up the video switcher
        var loadUrl = document.getElementById('load-url');
        var url = document.getElementById('url');
        loadUrl.addEventListener('submit', function (event) {
            event.preventDefault();
            player.src({
                src: url.value,
                type: 'application/x-mpegURL'
            });
            return false;
        });
    }(window, window.videojs));
</script>

</body>
</html>
